<template>
  <div class="count">
    <!-- 如果想要获取某个真实DOM 我们需要使用ref属性,值是一个名字,未来通过这个名字获取DOM -->
    <h1>{{ count }}</h1>
    <h2>id:{{ id }}</h2>
    <button @click="add(num)">累加</button>
    <button @click="showThis">打印组件实例</button>
  </div>
</template>

<script>
export default {
  naem: "MyCount",
    // 限制类型写法
  props: {
    num: {
      type: Number,
    },
    // 如果不限制类型用下面写法
    // props:["num"],
    id: {
      type: Number,
      // 是否必填
      require: true,
      // 默认值
     default: Date.now(),
    },
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add(num) {
      this.count+=num;
    },
    showThis() {
      console.log(this);
    },
  },
};
</script>

<style>
.count {
  background-color: aqua;
  height: 200px;
}
</style>